<template>
  <div class="row">
  	<div class="button-group">
      <div class="buy button" :class="{'disabled': status !== 0}" @click="$emit('buy-now', 1)">立即购买</div>
      <div class="add-to-cart button" :class="{'disabled': status !== 0}" @click="$emit('add-to-cart')">加入购物车</div>
  	</div>
  </div>
</template>

<script>
  export default {
    props: {
      status: {
        type: Number,
        default: 1
      }
    }
  }
</script>

<style lang="scss" scoped>
.button-group {
  padding-left: 100px;

  .button {
    color: white;
    cursor: pointer;
    float: left;
    font-size: 16px;
    font-weight: 100;
    width: 180px;
    height: 41px;
    line-height: 39px;
    text-align: center;

    &.disabled {
      background-color: grey !important;
      border: 1px solid grey !important;
      cursor: default;
      color: white;
    }
  }
  .add-to-cart {
    background-color: #f10b88;
  }
  .fight-alone {
    background-color: #f10b88;
    margin-right: 40px;
  }
  .buy {
    background-color: #f9eef6;
    border: 1px solid #f10b88;
    color: #f10b88;
    margin-right: 8px;
  }

}
</style>